<script setup>
import { ref, onMounted } from 'vue';
import { useRegister } from '/hooks/login.js'
import { useUserStore } from "/store/user.js"
import { onShow } from '@dcloudio/uni-app'
import { uniFetch } from '../../api/uni-fetch';
import customTabbar from '@/components/customTabbar/customTabbar.vue';

import { onShareAppMessage } from '@dcloudio/uni-app'

onShareAppMessage(() => {
	const openid = uni.getStorageSync("userLoginCode").openid || uni.getStorageSync("userLoginCode").user.openid
	return {
		title: '华靓甄选-我的',
		path: '/pages/mine/mine?invite_token=' + openid
	}
})

// 个人信息仓库
const userInfo = ref({})
const userMember = ref({})
const memberText = ref('')
const store = useUserStore()

// const list = ref([])
// function getShareDmg() {
// 	uniFetch.post("/dmg/share-list").then(res => {
// 		console.log("share-list", res.data);
// 		list.value = res.data
// 		list.value.forEach(value => {
// 			value['top'] = Math.floor(Math.random() * 300 + 30)
// 			value['left'] = Math.floor(Math.random() * 600 + 30);
// 			value['img'] = "../../static/images/diamond1.png"
// 			value['show'] = true
// 			value['state'] = Math.floor((Math.random() * 2))
// 		})
// 	}, err => {
// 		console.log(err, "2")
// 	})
// }
// getShareDmg()

// function getCollect(e) {
// 	const innerAudioContext = uni.createInnerAudioContext()
// 	if (!innerAudioContext) {
// 		throw new Error('Failed to create audio context');
// 	}
// 	innerAudioContext.autoplay = true
// 	innerAudioContext.obeyMuteSwitch = false
// 	innerAudioContext.src = "/static/money.mp3"
// 	// 添加错误处理
// 	innerAudioContext.onError((err) => {
// 		console.error('Audio error:', err);
// 	});
// 	innerAudioContext.play();

// 	list.value[e].top = 170
// 	list.value[e].left = 320
// 	list.value[e].state = 2
	
// 	setTimeout(() => {
// 		list.value[e].show = false
// 		uniFetch.post("/dmg/get", {
// 			id: list.value[e].id
// 		}).then(res => {
// 			totalAmount.value = res.data.dmg_money
// 			if (list.value.length == 0) {
// 				list.value = []
// 			}
// 		}, err => {
// 			console.log(err, "3")
// 		})
// 	}, 500)
// }

const totalAmountDMG = ref(0)
onMounted(async () => {
  const res = await uniFetch.post('/user/info', {
    token: uni.getStorageInfoSync('token')
  });
	totalAmountDMG.value = Number(res.data?.user?.dmg_money || 0)
})

const totalAmount = ref('--')
const freezeAmount = ref('--')
const phone = ref('')
onShow(async () => {
	if (!store.token) {
		uni.showToast({
			title: '请您登录',
			icon: 'none'
		})
		store.userInfo = ''
		store.memberInfo = ''
		store.token = ''
		userInfo.value = {}
		userMember.value = {}
		totalAmount.value = '--'
		freezeAmount.value = '--'
		return
	}
	console.log('mine==>onShow', store.userInfo);
	userInfo.value = store.userInfo
	const member = await uni.request({
		url: uniFetch.baseURL + '/user/user-member',
		method: 'POST',
		header: {
			token: store.token
		}
	})
	// console.log(member, '会员信息');
	userMember.value = member.data.data
	if (!userMember.value.is_member) {
		memberText.value = '非会员'
	} else {
		memberText.value = userMember.value.userMember.name
	}
	try {
		const res = await uniFetch.post('/user/info')
		console.log(res, '个人资料info');
		if (res.code !== 10000) {
			uni.showToast({
				title: '请您登录',
				icon: 'none'
			})
			store.userInfo = ''
			store.memberInfo = ''
			store.token = ''
			userInfo.value = {}
			userMember.value = {}
			totalAmount.value = '--'
			freezeAmount.value = '--'
			return
		}
		phone.value = res.data.user.phone
		totalAmount.value = res.data.user.dmg_money.toFixed(2)
		freezeAmount.value = res.data.user.freeze_money.toFixed(2)
	} catch (error) {
		console.log(error);
	}
})

// 订单列表
const orderList = [{
	icon: 'icon-yierqianbao',
	title: '待付款',
	index: 1
}
	// , {
	// 	icon: 'icon-daitihuo',
	// 	title: '待发货',
	// 	index: 2
	// }
	, {
	icon: 'icon-tihuo',
	title: '已付款',
	index: 2
}, {
	icon: 'icon-yiwancheng',
	title: '已完成',
	index: 0
},]


// 更多服务
const serverList = [
	// {
	// 	icon: 'icon-cat_smk',
	// 	title: '会员充值'
	// }, 
	{
		icon: 'icon-weibiaoti2fuzhi08',
		title: '收货地址',
		index: 1
	}, 
	{
		icon: 'icon-cooperation',
		title: '申请经销商',
		index: 2
	}
]

// 跳转订单页
function viewOrder(index = 0) {
	if (!userInfo.value.nickname) {
		uni.showToast({
			title: '请您登录',
			icon: 'none'
		})
		return
	}
	uni.navigateTo({
		url: '/pages/orders/orders?index=' + index
	})
}

function czGo() {
	uni.navigateTo({
		url: '/pages/MemberRecharge/MemberRecharge'
	});
}

// 更多服务
function moreServes(index, res) {
	if (!userInfo.value.nickname) {
		uni.showToast({
			title: '请您登录',
			icon: 'none'
		})
		return
	}

	if (index === 0) {
		// 判断是否授权手机号
		const res = uni.getStorageSync('userLoginCode')
		if (res?.user?.phone) {
			uni.navigateTo({
				url: '/subpkg/MemberEquity/MemberEquity'
			})
		} else {
			uni.showToast({
				icon: 'none',
				title: '需要先授权手机号',
				duration: 2000,
			})
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/UserLogin/UserLogin?page=memberEquity'
				})
			}, 2000);
		}
	} else if (index === 1) {
		wx.getPrivacySetting({
			buttonColor: '#f92f01',
			success: res => {
				console.log(res)
				if (res.needAuthorization) {
					// 需要弹出隐私协议
					console.log(res, '隐私');
				} else {
					// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
					console.log('隐私条款suc');
				}
			},
			fail: (err) => {
				console.log(err.msg, '隐私协议接口出错');
			},
		})


		uni.chooseAddress({
			success(res) {
				console.log(res, 'dizhi');
			}
		})
	} else if (index == 2) {

		if (!userInfo.value.nickname) {
			return uni.showToast({
				title: '请先登录',
				icon: 'none'
			})
		}

		uni.navigateTo({
			url: '/subpkg/AgencyDealer/AgencyDealer'
		})
	} else if (index == 3) {
		// uni.redirectTo({
		// 	url: '/subpkg/AgencyDealer/AgencyDealer'
		// })
		console.log(index, res);
	} else if (index == 4) {
		uni.navigateTo({
			url: "/subpkg/replenishmentList/replenishmentList",
		});
	}

}

const goLogin = () => {
	useRegister()
	// return wx.restartMiniProgram({
	// 	path: '/pages/index/index'
	// })
	// const info = uni.getStorageSync('__persisted__user')
	// userInfo.value = info.userInfo
	// totalAmount.value = info.userInfo.dmg_money.toFixed(2)
	// freezeAmount.value = info.userInfo.dmg_money.toFixed(2)
}

const orderClickNavigate = (index) => {
	if (!store.token) {
		uni.showToast({
			title: '请您登录',
			icon: 'none'
		})
		return
	}
	uni.navigateTo({
		url: '/subpkg/orderList/orderList?index=' + index
	})
}
</script>

<template>
	<view class="page">
		<!-- 个人信息 -->
		<view class="user-info">
			<!-- 会员积分 -->
			<!-- <view class="dmg-icon animated moves" v-show="items.show"
				v-for="(items, index) in list" :key="index" @click="getCollect(index)"
				:style="{ top:items.top+'rpx',left:items.left+'rpx',}">
				<image src="../../static/diamond1.png" mode="scaleToFill" style="width: 50rpx;height: 50rpx;">
				</image>
				<view style="color: white;font-size: 20rpx;">{{items.dmg}}</view>
			</view> -->

			<!-- 这里不显示授权手机号 v-if="userInfo.nickname && !phone" -->
			<navigator v-if="false" url="/pages/UserLogin/UserLogin?page=mine" class="phone-navigator">
				授权手机号
			</navigator>

			<view class="avatar-wai">
				<view class="avatar-nei">
					<image src="/static/logo1.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="user-name" v-if="userInfo.nickname">
				<view class="name">
					{{ userInfo.nickname }}
				</view>
				<view class="vip" :class="{ 'novip': !userMember?.is_member }">
					{{ memberText }}
				</view>
			</view>

			<view class="user-name" v-else @click="goLogin">
				<view class="name">
					点击登录
				</view>
			</view>
		</view>

		<!-- 我的钱包 -->
		<view class="my-wallet2">
			<navigator class="wallet-all" hover-class="none" url="/subpkg/MyWallet/MyWallet">
				<view class="title" style="padding-left: 10px">智能柜钱包</view>
				<view class="all"><text>查看更多</text><uni-icons type="right" size="20" color="#d4d1d1"></uni-icons>
				</view>
			</navigator>
			<view class="wallet">
				<view class="item" style=" flex-shrink: 0; width: 250rpx;">
					<view class="title">
						总金额
					</view>
					<view class="money">
						¥{{ totalAmount }}
					</view>
				</view>
				<view class="item" style=" flex-shrink: 0; width: 180rpx;">
					<view class="title">
						DMG
					</view>
					<view class="money">
						{{ totalAmountDMG ? totalAmountDMG.toFixed(2) : 0 }}
					</view>
				</view>
				<view style="display: flex; justify-content: center; flex: 1; height: 100%; align-items: center;" @click="czGo">
					立即充值
				</view>
			</view>
		</view>

		<!-- 订单中心 -->
		<view class="my-order-box">
			<view class="order-all">
				<view class="title" style="padding-left: 10px">商城订单</view>
				<view class="all" @click="viewOrder(0)"><text>全部订单</text><uni-icons type="right" size="20"
						color="#d4d1d1"></uni-icons>
				</view>
			</view>

			<view class="classify-order">
				<view class="order-class" hover-class="view-click" v-for="(item, index) in orderList" :key="item"
					@click="viewOrder(item.index)">
					<uni-icons custom-prefix="iconfont" :type="item.icon" size="38" color="#3bae43"></uni-icons>
					<view class="name">
						{{ item.title }}
					</view>
				</view>
			</view>

		</view>

		<!-- 商城订单 -->
		<view class="my-wallet">
			<view class="wallet-all" hover-class="none">
				<view class="title" style="padding-left: 10px">智能柜订单</view>
			</view>
			<view class="wallet">
				<view class="item" @click="orderClickNavigate(0)">
					<uni-icons custom-prefix="iconfont" type="icon-yierqianbao" size="34" color="#3bae43"></uni-icons>
					<view class="name">
						所有订单
					</view>
				</view>
				<view class="item" @click="orderClickNavigate(1)">
					<uni-icons custom-prefix="iconfont" type="icon-tihuo" size="32" color="#3bae43"></uni-icons>
					<view class="name">
						结算中
					</view>
				</view>
				<view class="item" @click="orderClickNavigate(2)">
					<uni-icons custom-prefix="iconfont" type="icon-yiwancheng" size="30" color="#3bae43"></uni-icons>
					<view class="name" style="margin-top: 1px;">
						已结算
					</view>
				</view>
				<view class="item" @click="orderClickNavigate(3)">
					<image src="/static/tuikuan.png" class="img"> </image>
					<view class="name">
						退款/售后
					</view>
				</view>
			</view>
		</view>

		<!-- 更多服务 -->
		<view class="more-serves">
			<view class="more-all">
				<view class="title" style="padding-left: 10px">更多服务</view>
			</view>
			<view class="classify-order">
				<button class="order-btn-class" hover-class="view-click" @click="moreServes(4)">
					<view class="icon">
						<uni-icons type="plus" size="38" color="#3bae43"></uni-icons>
					</view>
					<view class="name">
						补货订单
					</view>
				</button>
				<view class="order-class" hover-class="view-click" v-for="(item, index) in serverList" :key="item"
					@click="moreServes(item.index)">
					<uni-icons custom-prefix="iconfont" :type="item.icon" size="38" color="#3bae43"></uni-icons>
					<view class="name">
						{{ item.title }}
					</view>
				</view>
				<button open-type="contact" class="order-btn-class" hover-class="view-click" @click="moreServes(3)">
					<view class="icon">
						<uni-icons custom-prefix="iconfont" type="icon-kefu2" size="38" color="#3bae43"></uni-icons>
					</view>
					<view class="name">
						我的客服
					</view>
				</button>
			</view>
		</view>
		<ws-wx-privacy id="privacy-popup"></ws-wx-privacy>

		<!-- <view class="safe-area"></view> -->
	</view>
	<!-- <customTabbar></customTabbar> -->
</template>


<style lang="scss">
@import "@/static/iconfont/iconfont.css";
</style>

<style lang="scss" scoped>
.img {
	width: 62rpx;
	height: 62rpx;
}
.page {
	position: relative;
	background-color: #f3f3fe;
	min-height: 100vh;
	width: 100%;
	padding-bottom: 293rpx;
	// 点击态
	.view-click {
		background-color: #fafafa;
	}

	.user-info {
		position: relative;
		display: flex;
		height: 320rpx;
		padding: 70rpx 50rpx 0;
		background: generate-gradient-bottom(#3bae43, #bffcc2);
		box-shadow: 0px 15rpx 10rpx 5px #bffcc2;

		.phone-navigator {
			position: absolute;
			top: 40%;
			right: 50rpx;
			color: #fefefe;
			border: 1rpx solid #fefefe;
			padding: 0 15rpx;
			height: 38rpx;
			line-height: 38rpx;
			border-radius: 8rpx;
			background-color: #260038;
			font-size: 26rpx;
		}

		.avatar-wai {
			padding-top: 2rpx;
			box-sizing: border-box;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			background-color: #fefefe;

			.avatar-nei {
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 156rpx;
				height: 156rpx;
				border-radius: 50%;
				background-color: $custom-theme-color-2;
				overflow: hidden;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}
			}
		}

		.user-name {
			margin: 20rpx 0 0 30rpx;

			.name {
				font-size: 45rpx;
				color: #fefefe;
				line-height: 65rpx;
			}

			.vip {
				margin-top: 18rpx;
				background-color: #fcd87a;
				// width: 100rpx;
				height: 40rpx;
				text-align: center;
				border-radius: 10rpx;
				color: #af6e25;
				font-size: 23rpx;
				line-height: 40rpx;
			}

			.novip {
				margin-top: 18rpx;
				background-color: #7f7d7f;
				width: 100rpx;
				height: 40rpx;
				text-align: center;
				border-radius: 10rpx;
				color: #e8e3e7;
				font-size: 23rpx;
				line-height: 40rpx;
			}
		}
	}

	.my-order-box {
		position: absolute;
		top: 580rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 25rpx 15rpx;
		height: 275rpx;
		width: 680rpx;
		border-radius: 10rpx;
		background-color: #fefefe;
		box-shadow: 0rpx 5rpx 10rpx 0px #dddddd;

		.order-all {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 25rpx;
			margin-bottom: 25rpx;
			border-bottom: #f1f1f1 solid 1px;

			.title {
				font-size: 36rpx;
			}

			.all {
				font-size: 28rpx;
				color: #828382;
				vertical-align: middle;
			}
		}

		.classify-order {
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			width: 645rpx;
			height: 195rpx;
			padding: 15rpx;
			overflow: hidden;

			.order-class {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				width: 140rpx;
				height: 130rpx;
				border-radius: 15rpx;

				.name {
					color: #3e323e;
					font-size: 35rpx;
				}
			}


		}
	}

	.my-wallet2 {
		position: absolute;
		top: 300rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 25rpx 15rpx;
		height: 195rpx;
		width: 680rpx;
		border-radius: 10rpx;
		background-color: #fefefe;
		box-shadow: 0rpx 5rpx 10rpx 0px #dddddd;
		.wallet-all {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 25rpx;
			margin-bottom: 10rpx;
			border-bottom: #f1f1f1 solid 1px;
			.title {
				font-size: 36rpx;
			}
			.all {
				font-size: 28rpx;
				color: #828382;
				vertical-align: middle;
			}
		}

		.wallet {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			height: 115rpx;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 220rpx;
				height: 100%;
				border-right: #f1f1f1 solid 1px;
			}
		}
	}
	.my-wallet {
		position: absolute;
		top: 940rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 25rpx 15rpx;
		height: 195rpx;
		width: 680rpx;
		border-radius: 10rpx;
		background-color: #fefefe;
		box-shadow: 0rpx 5rpx 10rpx 0px #dddddd;

		.wallet-all {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 25rpx;
			margin-bottom: 10rpx;
			border-bottom: #f1f1f1 solid 1px;

			.title {
				font-size: 36rpx;
			}

			.all {
				font-size: 28rpx;
				color: #828382;
				vertical-align: middle;
			}
		}


		.wallet {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			height: 115rpx;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 220rpx;
				height: 100%;
				border-right: #f1f1f1 solid 1px;
			}
		}
	}


	.more-serves {
		position: absolute;
		// 隐藏充值
		top: 1220rpx;
		// top: 650rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 25rpx 15rpx;
		height: 265rpx;
		width: 680rpx;
		border-radius: 10rpx;
		background-color: #fefefe;
		box-shadow: 0rpx 5rpx 10rpx 0px #dddddd;


		.more-all {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 25rpx;
			margin-bottom: 25rpx;
			border-bottom: #f1f1f1 solid 1px;

			.title {
				font-size: 36rpx;
			}
		}

		.classify-order {
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			width: 645rpx;
			height: 195rpx;
			padding: 15rpx;
			overflow: hidden;

			.order-class {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				width: 140rpx;
				height: 130rpx;



				.name {
					color: #3e323e;
					font-size: 28rpx;
				}
			}

			button {
				padding: 0;
				margin: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				width: 140rpx;
				height: 130rpx;
				// border-radius: 15rpx;
				background-color: #fefefe;

				&:after {
					border: none;
				}

				.icon {
					line-height: 1;
				}

				.name {
					color: #3e323e;
					font-size: 28rpx;
					line-height: 1;
				}
			}
		}
	}
}
.safe-area {
  height: calc(env(safe-area-inset-bottom) + 110rpx);
  background: #fff;
}
</style>

<style lang="scss">
@import url("/static/animate.css");
.moves {
	animation: pulse 2s infinite;
}
.dmg-icon {
	position: absolute;
	z-index: 6;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: all 0.5s linear;
	image {
		width: 60rpx;
		height: 60rpx;
	}
	view {
		width: 60rpx;
		color: #333;
		text-align: center;
		font-size: 20rpx;
		margin-top: -10rpx;
	}
}

.balance2 {
	width: 690rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 30rpx;
	padding: 30rpx;
	.balance2-img1 {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 20rpx;
		.balance2-img1-c {
			width: 60rpx;
			height: 60rpx;
			background: url(../../static/images/充值.png);
			background-size: 100%;
		}
	}

	.balance2-img2 {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 20rpx;
		.balance2-img2-c {
			width: 60rpx;
			height: 60rpx;
			background: url(../../static/images/提现.png);
			background-size: 100%;
		}
	}
}

// 资产分布
.balance {
	width: 690rpx;
	margin: 0 auto;
	margin-top: 20rpx;
	border-radius: 20rpx;
	padding: 10rpx;
	box-sizing: border-box;
	.balance-top {
		height: 100rpx;
		p {
			margin-bottom: 50rpx;
			font-size: 30rpx;
		}
		border-bottom: 1rpx solid #FAF9F9;
		margin-bottom: 20rpx;
	}

	.balance-box {
		height: 130rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #FAF9F9;
		.balance-img {
			flex: 1;
			display: flex;
			justify-content: center;
			height: 50rpx;
			align-items: center;
			background-image: url(../../static/images/right.png);
			background-size: 10%;
			background-position: 180rpx 10rpx;
			background-repeat: no-repeat;
		}
		.balance-title {
			flex: 1;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 80rpx;
			font-size: 25rpx;
			color: #ACACAC;
		}
		.userMoney {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 35rpx;
		}
	}

	.balance-box2 {
		margin-top: 20rpx;
		height: 130rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #FAF9F9;
		.balance-img {
			flex: 1;
			display: flex;
			justify-content: center;
			height: 50rpx;
			align-items: center;
			background-image: url(../../static/images/right.png);
			background-size: 10%;
			background-position: 180rpx 10rpx;
			background-repeat: no-repeat;
		}
		.balance-title {
			flex: 1;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 80rpx;
			font-size: 25rpx;
			color: #ACACAC;
		}
		.userMoney {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 35rpx;
		}
	}
}

// 总资产
.balance1 {
	height: 400rpx;
	width: 690rpx;
	margin: 10rpx auto;
	border-radius: 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #F08519;
	position: relative;

	.balance-title {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		position: absolute;
		top: 50rpx;
		left: 50rpx;
	}

	.balance-num {
		color: #fff;
		margin-top: 5rpx;
		display: flex;
		align-items: baseline;
		.userMoney {
			font-size: 50rpx;
			text {
				font-size: 50rpx;
			}
		}
	}
}
</style>